<script setup lang="ts">
import ThemeSelector from "@/components/ThemeSelector.vue";
</script>

<template>
  <div class="settings-page">
    <div class="page-header">
      <h1>系统设置</h1>
      <p>配置您的个人偏好和系统设置</p>
    </div>

    <div class="settings-content">
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <span>外观设置</span>
          </div>
        </template>
        <ThemeSelector />
      </el-card>

      <!-- 可以添加更多设置项 -->
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <span>其他设置</span>
          </div>
        </template>
        <p class="placeholder-text">更多设置功能即将开放...</p>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.settings-page {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;

  .page-header {
    margin-bottom: 24px;

    h1 {
      font-size: 24px;
      color: #333;
      margin: 0 0 8px 0;
    }

    p {
      color: #666;
      margin: 0;
    }
  }

  .settings-content {
    display: grid;
    gap: 20px;

    .settings-card {
      .card-header {
        font-weight: 500;
        color: #333;
      }

      .placeholder-text {
        color: #666;
        text-align: center;
        padding: 20px;
        margin: 0;
      }
    }
  }
}
</style>
